<template>
  <view class="page-container">
    <GlobalTopBar ref="topBarRef" class="topbars" :isLeft="true" color="#fff">
      <template #title
        ><text style="color: #fff">{{ datas.title }}</text></template
      >
    </GlobalTopBar>
    <view class="page_content">
      <template v-if="!text">
        <image
          class="cz_img"
          :src="`${store.imgDomain}cz_1.png`"
          mode="widthFix"
        />
        <view class="td flex_center">
          <text
            class="char"
            :style="{ animationDelay: `${index * 0.3}s` }"
            v-for="(char, index) in datas.text1.split('')"
            :key="index"
            >{{ char }}</text
          >
        </view>
      </template>
      <template v-else-if="text === 1">
        <view class="flex_center" style="flex-direction: column">
          <uni-icons
            type="checkbox-filled"
            size="100"
            color="#3692FF"
          ></uni-icons>
          <!-- <uni-icons type="clear" size="100" color="#FF0000"></uni-icons> -->
          <text style="font-size: 30rpx">{{ datas.succInfo.text1 }}</text>
          <!-- <text>下单失败，请联系客服处理</text> -->
          <view class="btns flex_center">
            <view
              class="fhsy"
              @click="
                uni.reLaunch({
                  url: datas.succInfo.btn1info.path,
                })
              "
              >{{ datas.succInfo.btn1info.text1 }}</view
            >
            <view
              class="ckdd"
              @click="
                uni.reLaunch({
                  url: datas.succInfo.btn2info.path,
                })
              "
              >{{ datas.succInfo.btn2info.text1 }}</view
            >
          </view>
        </view>
      </template>
      <template v-else-if="text === 2 || !nums">
        <view class="flex_center" style="flex-direction: column">
          <uni-icons type="clear" size="100" color="#FF0000"></uni-icons>
          <text style="font-size: 30rpx">{{ datas.errInfo.text1 }}</text>
          <view class="btns flex_center">
            <view
              class="fhsy"
              @click="
                uni.reLaunch({
                  url: datas.errInfo.btn1info.path,
                })
              "
              >{{ datas.errInfo.btn1info.text1 }}</view
            >
            <view
              class="ckdd"
              @click="
                uni.reLaunch({
                  url: datas.errInfo.btn2info.path,
                })
              "
              >{{ datas.errInfo.btn2info.text1 }}</view
            >
          </view>
        </view>
      </template>
      <!-- <view class="djs" v-else style="color: #fd2a53">查询失败</view> -->
    </view>
  </view>
</template>

<script setup>
import { ref, computed, reactive } from 'vue';
import { useCounterStore } from '@/store';
import { onLoad, onShow } from '@dcloudio/uni-app';
import request from '@/utils/request';
import { validatePhone } from '@/utils/validate';

const store = useCounterStore();
// 列表数据相关
const listData = ref([]);
const nums = ref(30);
const text = ref(0);
const timer = ref();
const cxData = [
  {
    url: 'wxapp/user/checkRechargeCardOrderIsPay',
    title: '交易查询',
    text1: '查询支付中，请稍候',
    succInfo: {
      text1: '交易成功',
      btn1info: {
        text1: '返回首页',
        path: '/pages/home/index',
      },
      btn2info: {
        text1: '查看余额',
        path: '/pages/my/index',
      },
    },
    errInfo: {
      text1: '交易失败，请联系客服处理',
      btn1info: {
        text1: '返回首页',
        path: '/pages/home/index',
      },
      btn2info: {
        text1: '查看余额',
        path: '/pages/my/index',
      },
    },
  },
  {
    url: 'wxapp/user/checkUserLevelOrderIsPay',
    title: '会员开通查询',
    text1: '查询支付中，请稍候',
    succInfo: {
      text1: '开通成功',
      btn1info: {
        text1: '返回首页',
        path: '/pages/home/index',
      },
      btn2info: {
        text1: '查看会员',
        path: '/pages/my/index',
      },
    },
    errInfo: {
      text1: '开通失败，请联系客服处理',
      btn1info: {
        text1: '返回首页',
        path: '/pages/home/index',
      },
      btn2info: {
        text1: '查看会员',
        path: '/pages/my/index',
      },
    },
  },
  {
    url: 'wxapp/order/checkInitialPaymentServiceOrderIsPay',
    title: '下单支付查询',
    text1: '查询支付中，请稍候',
    succInfo: {
      text1: '下单支付成功',
      btn1info: {
        text1: '返回首页',
        path: '/pages/home/index',
      },
      btn2info: {
        text1: '查看订单',
        path: '/pages/my/index',
      },
    },
    errInfo: {
      text1: '下单支付失败，请联系客服处理',
      btn1info: {
        text1: '返回首页',
        path: '/pages/home/index',
      },
      btn2info: {
        text1: '查看订单',
        path: '/pages/my/index',
      },
    },
  },
  {
    url: 'wxapp/user/checkPendingBalancePaymentServiceOrderIsPay',
    title: '尾款支付查询',
    text1: '查询支付中，请稍候',
    succInfo: {
      text1: '支付成功，等待师傅完成订单',
      btn1info: {
        text1: '返回首页',
        path: '/pages/home/index',
      },
      btn2info: {
        text1: '查看订单',
        path: '/pages/my/index',
      },
    },
    errInfo: {
      text1: '支付失败，请联系客服处理',
      btn1info: {
        text1: '返回首页',
        path: '/pages/home/index',
      },
      btn2info: {
        text1: '查看订单',
        path: '/pages/my/index',
      },
    },
  },
];
const datas = ref(cxData[0]);

// 查询充值卡购买订单支付状态
const zfcallbackFun = async (option) => {
  try {
    await request(datas.value.url, {
      tid: option.tid,
      service_order_transaction_record_tid: option.tid,
    });
    clearInterval(timer.value);
    text.value = 1;
  } catch {
    if (nums.value != 0) {
      zfcallbackFun(option);
    }
  }
};

onLoad((option) => {
  if (!option.tid) return;
  datas.value = cxData[+option.index || 0];
  setTimeout(() => {
    zfcallbackFun(option);
    timer.value = setInterval(() => {
      nums.value--;
      console.log(nums.value);
      if (!nums.value) {
        text.value = 2;
        clearInterval(timer.value);
      }
    }, 1000);
  }, 1000);
});
</script>

<style lang="scss" scoped>
.topbars {
  background: linear-gradient(to right, #2f80ff, #3184ff);
}
.page_content {
  box-sizing: border-box;
  position: relative;
  padding: 200rpx 20rpx 20rpx;
  text-align: center;
  .djs {
    font-size: 50rpx;
  }
  .td {
    font-size: 30rpx;
  }
  .cz_img {
    display: block;
    width: 200rpx;
    margin: 0 auto 20rpx;
  }
}
.btns {
  margin-top: 20rpx;
  flex-direction: row;
}
.fhsy {
  border: 1rpx solid #999;
  line-height: 70rpx;
  font-size: 30rpx;
  border-radius: 35rpx;
  margin-right: 20rpx;
  padding: 0 70rpx;
}
.ckdd {
  line-height: 70rpx;
  font-size: 30rpx;
  border-radius: 35rpx;
  padding: 0 70rpx;
  color: #fff;
  background-color: #3692ff;
  border: 1rpx solid #3692ff;
}

.char {
  display: inline-block;
  /* 总时长=单字符动画(1.2s)+等待时间(1s)=2.2s，确保3字跳完+等1秒再循环 */
  animation: jump-cycle 4s infinite ease-in-out;
  animation-fill-mode: both;
}

$delay-step: 0.3s; // 每个字符的延迟间隔
$max-char-count: 10; // 最多支持的字符数（按需设置，比如10个足够覆盖大部分场景）

// 2. SCSS循环自动生成nth-child规则
@for $i from 1 through $max-char-count {
  .char:nth-child(#{$i}) {
    // 延迟计算：第1个0s，第2个0.3s，第3个0.6s...依次递增
    animation-delay: ($i - 1) * $delay-step;
  }
}

/* 动画循环：跳→回→等1秒 */
@keyframes jump-cycle {
  0%,
  10% {
    transform: translateY(0);
  } /* 初始静止 */
  20% {
    transform: translateY(-12rpx);
  } /* 上跳顶点 */
  30%,
  95% {
    transform: translateY(0);
  } /* 回位+保持静止（等待1秒） */
  100% {
    transform: translateY(0);
  } /* 循环衔接 */
}
</style>
